<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .box {
            margin: 0 auto;
            position: relative;
        }

        img {
            margin: 10px;
            padding: 10px;
            border: 1px solid pink;
            border-radius: 10px;
            box-shadow: 5px 5px 10px skyblue;
        }

        .w {
            float: left;
        }

    </style>
</head>
<body>
<div class="box"></div>
<script>
    //1.获取页面元素
    var box = document.querySelector('.box');
    //2.准备数据源
    // var dataStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}';
    // var data = JSON.parse(dataStr);
    //遍历对象的src属性确定创建多少个div
    function addImg() {
        for (var i = 0; i < 10; i++) {
            var imgDiv = document.createElement('div');
            imgDiv.className = 'w';
            var img = document.createElement('img');
            img.src = `https://picsum.photos/400/600?r=`+i;
            imgDiv.appendChild(img);
            box.appendChild(imgDiv);
        }
    }
    function createGreateWall() {
        //1.让瀑布流居中显示
        //1.1获取视口的宽度
        var viewWidth = document.documentElement.clientWidth;
        //1.2用视口的宽度/一个div的宽度 拿到数量
        var divs = document.querySelectorAll('.w');
        var oneWidth = divs[0].offsetWidth;
        var count = Math.floor(viewWidth / oneWidth);
        //1.3数量*一个div的宽度
        box.style.width = count * oneWidth + 'px';
        //2.瀑布流成型
        //2.1存储第一行每个元素的高度
        var heightArr = [];
        for (var i = 0; i < divs.length; i++) {
            if (i < count) {//4 0 1 2 3
                heightArr.push(divs[i].offsetHeight);
            } else {
                divs[i].style.position = 'absolute';
                /**
                 * 第二行的每张图片都是从上一行高度最小的图片下开始添加
                 * 0.获取上一行高度最小的图片
                 * 1.获取上一行高度最小图片的高 Y  offsetLeft X
                 */
                //不是第一行 计算第二行每个图片的位置
                var minValue = Math.min.apply(null, heightArr);
                //获取最小值在数组内的下标
                var minIndex = heightArr.indexOf(minValue);
                var x = divs[minIndex].offsetLeft;
            
                //定位确定位置
                divs[i].style.left = x + 'px';
                divs[i].style.top = minValue + 'px';
                heightArr[minIndex] = heightArr[minIndex] + divs[i].offsetHeight;
                //console.log(minValue,divs[minIndex].offsetHeight);
            }
        }
    }
    
    addImg();
    window.onload = function () {
      createGreateWall();
    }
    //判断函数
    function judge()
    {
    	//当前视口高度加上滚动距离>最后一张图片距离父元素的高度
    	var viewHeight=document.documentElement.clientHeight;//视口高度
    	var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //滚动高度
    	//获取最后一个元素高度
    	var divs=document.querySelectorAll(".w");
    	var lastHeight=divs[divs.length-1].offsetTop;
        console.log('scrollTop',scrollTop,'lastHeight',lastHeight,'viewHeight',viewHeight)
    	if(viewHeight+scrollTop>lastHeight)
    	{
    		return true;
    	}else{
    		return false;
    	}
    }
    
    window.onscroll=function()
    {
    	//是否进行数据的填充
    	if(judge())
    	{
    		addImg();
    		createGreateWall();
    	}
    }


</script>
</body>
</html>
